
<template>
    <form class="mui-input-group">
        <div class="mui-input-row">
            <label class="tit">收件人</label>
            <input v-model="form.name" type="text" class="mui-input-clear" placeholder="请输入收件人姓名">
        </div>
        <div class="mui-input-row">
            <label class="tit">联系方式</label>
            <input v-model="form.tel" type="text" class="mui-input-clear" placeholder="请输入手机号">
        </div>
        <div class="mui-input-row">
            <label class="tit">所在地区</label>
            <input v-model="form.area" type="text" class="mui-input-clear" placeholder="所在地区" @click="choose">
            <div class="divwrap">
                <div class="mask" @click="choose" v-show="show"></div>
                <v-distpicker v-show="show" type="mobile" @province="onChangeProvince" @city="onChangeCity"
                    @area="onChangeArea" :province="newInfo.province" :city="newInfo.city" :area="newInfo.district">
                </v-distpicker>
            </div>

        </div>
        <div class="mui-input-row">
            <label class="tit">详细地址</label>
            <input v-model="form.detail" type="text" class="mui-input-clear" placeholder="请输入详细地址">
        </div>
        <div class="mui-button-row">
            <button @click="save" type="button" class="mui-btn mui-btn-primary mui-btn-block">确认</button>
            <button v-show="id" @click="del" type="button" class="mui-btn mui-btn-danger mui-btn-block">删除</button>
        </div>
    </form>
</template>
<script>
import VDistpicker from 'v-distpicker'
export default {
    data () {
        return {
            form: {
                name: '',
                tel: '',
                area: '',
                detail: ''
            },
            show: false,     // 是否显示遮罩层
            newInfo: {
                province: '', // 省
                city: '',     // 市
                area: '',     // 区
            },



        }
    }, props: ['id'],
    created () {
        this.getAddress()
    },
    methods: {
        save () {
            this.$indicator.open({
                text: '提交中'
            })
            this.form.id = this.id
            this.$http.post('address/save', this.form).then(res => {
                this.$indicator.close()
                window.console.log(res.data)
                if (res.data.code === 0) {
                    this.$toast(res.data.msg)
                } else if (res.data.code === 1) {
                    this.$toast(res.data.msg)
                    this.$router.go(-1)
                } else if (res.data.code === 2) {
                    this.$router.push({ name: 'login' })
                }

            })

        },

        choose () {
            this.show = !this.show
        },
        onChangeProvince (data) {
            this.newInfo.province = data.value
        },
        onChangeCity (data) {
            this.newInfo.city = data.value
        },
        onChangeArea (data) {
            this.newInfo.area = data.value
            this.form.area = this.newInfo.province + '-' + this.newInfo.city + '-' + this.newInfo.area
            this.show = false
        },
        getAddress () {
            if (!this.id) {
                return
            }
            this.$indicator.open({
                text: '加载中'
            })
            var params = { id: this.id }
            this.$http.get('address/edit', { params: params }).then(res => {
                this.$indicator.close()
                window.console.log(res.data)
                if (res.data.code === 0) {
                    this.$toast(res.data.msg)
                } else if (res.data.code === 1) {
                    this.form = res.data.data
                } else if (res.data.code === 2) {
                    this.$router.push({ name: 'login' })
                }

            })
        },
        del () {
            this.$indicator.open({
                text: '删除中'
            })
            this.form.id = this.id
            this.$http.post('address/del', this.form).then(res => {
                this.$indicator.close()
                if (res.data.code === 0) {
                    this.$toast(res.data.msg)
                } else if (res.data.code === 1) {
                    this.$toast(res.data.msg)
                    this.$router.go(-1)
                } else if (res.data.code === 2) {
                    this.$router.push({ name: 'login' })
                }

            })
        }


    },
    components: {
        'v-distpicker': VDistpicker
    }


}
</script>
<style lang="scss" scoped>
.mui-input-group .mui-button-row {
    height: auto;
}

.mui-input-clear {
    font-size: 14px;
}

.mui-input-group:before {
    list-style: none;
}

.mui-button-row {
    margin-top: 20px;

    button {
        margin: 20px 0;
        padding: 10px 0;
    }
}

.tit {
    color: #999;
}

input::-webkit-input-placeholder {
    color: #999;
}

input::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #999;
}

input:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #999;
}

input:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #999;
}

.divwrap>.mask {
    background: #000;
    opacity: 0.3;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.divwrap>.distpicker-address-wrapper {
    color: #999;
    background: #fff;
    border-top: 1px solid #ccc;
    z-index: 1;
    height: 350px;
    overflow-y: auto;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    margin-bottom: 50px;
}
</style>
